import $ from './library/jquery.js'
$(function () {
    let btn1 = $('.content .part1 .nextbtn button');
    //标题
    let listItem = $('.steps .steps-4 li');//li的类数组
    console.log(listItem);
    //部分
    let part1 = $('.content .part1');
    let part2 = $('.content .part2');
    let part3 = $('.content .part3');


    //part1 
    let phone = $('.content .part1 .num input');
    let phoneEm = $('.content .part1 .num em');

    let verify = $('.content .part1 .verify .verText');
    let verifyEm = $('.content .part1 .verify em');

    let verifyinput = $('.content .part1 .verify input');
    //part1 两次验证的结果
    let numRe, verRe;

    //part2
    let phoneN = $('.content .part2 .sec1 #localname');
    let loginPass = $('.content .part2 .sec2 .pass #password');
    let loginInfo = $('.content .part2 .sec2 .pass b');
    let pass;//用于获取输入的密码
    let confirmPass = $('.content .part2 .sec2 .confirm #confir');
    let confirmInfo = $('.content .part2 .sec2 .confirm b');
    let username = $('.content .part2 .sec3 #username');
    let usernameInfo = $('.content .part2 .sec3 b');

    let btn2 = $('.content .part2 .sec4 input');

    //生成一个随机验证码
    function random(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }
    function getCode(x) {
        var code = '';
        for (var i = 0; i < x; i++) {
            var type = random(1, 3);
            switch (type) {
                case 1:
                    code += String.fromCharCode(random(48, 57));
                    break;
                case 2:
                    code += String.fromCharCode(random(65, 90));
                    break;
                case 3:
                    code += String.fromCharCode(random(97, 122));
                    break;
            }
        }
        return code;
    }
    let ran = getCode(6);
    verify.html(ran);
    verify.on('click', function () {
        ran = getCode(6);
        verify.html(ran);
    })

    //函数防抖
    function debounce(callback, delay, immediate = false) {
        let timer = null; // 存放计时器id

        return function () {
            let args = arguments;

            if (immediate) { // 如果 参数是true 则立即执行
                callback.apply(this, args);
                return;
            }

            if (timer) {
                clearTimeout(timer);
            }

            timer = setTimeout(() => {
                callback.apply(this, args);
            }, delay);
        }
    }
    phone.on('input', debounce(function () {
        //验证标准手机号格式
        let reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
        numRe = reg.test($(this).val());

        numRe ? phoneEm.html('格式正确') && phoneEm.css('color', 'green') : phoneEm.html('格式错误') && phoneEm.css('color', 'red');

        $.ajax({
            type: "get",
            url: "../../interface/hasuser.php",
            data: {
                phone: $(this).val()
            },
            dataType: "json"
        }).then(function (data) {
            if (data.has) {
                phone.css('border-color', 'red')
                alert(data.msg);
            }
        }).catch(function (xhr) {
            console.log(xhr);
        });

        //将part1中用户输入的手机号获取到part2登录名处
        phoneN.val($(this).val());

    }, 2000));

    verifyinput.on('input', debounce(function () {
        verRe = ($(this).val() == ran);

        verRe ? verifyEm.html('验证成功') && verifyEm.css('color', 'green') : verifyEm.html('验证码错误,点击验证码可刷新') && verifyEm.css('color', 'red');
        //当电话号
        if (numRe && verRe) {
            btn1.css('background-color', '#ff0036');
            btn1.removeAttr('disabled');
        }
    }, 2000));

    btn1.on('click', function (ev) {
        ev.preventDefault();
        part1.addClass('display');
        part2.removeClass('display');
        listItem.eq(1).addClass('active');
    });


    //part2
    loginPass.on('input', function () {
        let reg = [
            /^.{6,}$/, // 验证长度
            /[A-Z]+/,
            /[a-z]+/,
            /\d+/,
            /[^A-Za-z0-9]+/,
        ];
        let check = reg.map(el => el.test(this.value));
        let len = check.shift(); // 获得第一个结果 第一个结果验证的是长度
        // 统计check中的布尔值true的数量
        let strong = check.reduce((prev, next) => prev + next);

        if (len) {
            switch (strong) {
                case 1:
                case 2:
                    loginInfo.html('密码强度：弱');
                    loginInfo.css('color', 'red');
                    break;
                case 3:
                    loginInfo.html('密码强度：中');
                    loginInfo.css('color', 'yellow');
                    break;
                case 4:
                    loginInfo.html('密码强度：强');
                    loginInfo.css('color', 'green');
                    break;
            }

        } else {
            loginInfo.html('密码长度不足6位');
            loginInfo.css('color', 'red');
        }
        pass = $(this).val();

    });

    confirmPass.on('input', function () {
        let result = ($(this).val() === pass)
        result ? confirmInfo.html('验证成功') && confirmInfo.css('color', 'green') : confirmInfo.html('两次密码不同') && confirmInfo.css('color', 'red');
    });

    username.on('input', function () {
        $.ajax({
            type: "get",
            url: "../../interface/hasuserName.php",
            data: {
                username: $(this).val()
            },
            dataType: "json"
        }).then(function (data) {
            if (data.has) {
                usernameInfo.html(data.msg);
                usernameInfo.css('color', 'red');
            } else {
                usernameInfo.html(data.msg);
                usernameInfo.css('color', 'green');
            }
        }).catch(function (xhr) {
            console.log(xhr);
        });
    });

    btn2.on('click', function (ev) {
        ev.preventDefault();
        $.ajax({
            type: "get",
            url: "../../interface/reg.php",
            data: {
                username: username.val(),
                password: loginPass.val(),
                phone: phoneN.val()
            },
            dataType: "json"
        }).then(function (data) {
            console.log(data);
        }).catch(function (xhr) {
            console.log(xhr);
        });
        listItem.eq(2).addClass('active');
        part2.addClass('display');
        part3.removeClass('display');

        setTimeout(function () {
            location.href = "../html/login.html"
        }, 2000);

    });

});